<template>
  <div class="alumniActivities">
    <!-- 活动列表 -->
    <div
      class="activeList"
      v-for="item in activeList"
      :key="item.actId"
      @click="goDetails(item)"
    >
      <div style="width: 16%">
        <u-tag
          text="校友活动"
          plain
          color="white"
          size="mini"
          type="warning"
          bgColor="#76d0a3"
          borderColor="#76d0a3"
        ></u-tag>
      </div>
      <div class="content">
        <div class="left">
          <div style="margin-bottom: 15px">
            <u--text size="17" :text="item.actTitle"></u--text>
          </div>
          <u--text size="12" color="#717171" :text="item.startTime"></u--text>
          <u--text size="12" color="#a6a6a6" :text="item.address"></u--text>
        </div>
        <div class="right">
          <u--image
            :showLoading="true"
            :src="item.pictures"
            width="57px"
            height="58px"
          ></u--image>
          <div class="state">{{ item.actState }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeList: [
        // {
        //   actId: 1,
        //   actTitle: "活动报名|校友桌游俱乐部，这个周日不宅家，一起来玩剧本杀",
        //   startTime: "2021-11-21",
        //   address: "深圳市南山区平山一路附近",
        //   pictures: require("@/static/index/login_bj.png"),
        //   actState: "已结束",
        // }
        // {
        //   actId: 2,
        //   title: "活动报名|校友户外俱乐部，人间何处寻瀑布，马峦山上齐共赏",
        //   time: "2021-11-20",
        //   address: "马峦山",
        //   img: "https://cdn.uviewui.com/uview/album/1.jpg",
        //   state: "已结束",
        // },
        // {
        //   actId: 3,
        //   title: "活动报名|校友摄影俱乐部11月户外实践",
        //   time: "2021-11-21",
        //   address: "深圳市福田区深业上城",
        //   img: require("@/static/index/login_bj.png"),
        //   state: "已结束",
        // },
        // {
        //   actId: 4,
        //   title: "香港校友会|冬日囤“肉”盼友归，多肉绿植制作活动",
        //   time: "2021-11-21",
        //   address: "深圳巿深圳市龙井地铁站附近",
        //   img: require("@/static/index/login_bj.png"),
        //   state: "已结束",
        // },
      ],
    };
  },
  onLoad(){
	  this.$apis.list().then((res) => {
	  	console.log(res)
		if(res.success){
			// let shuju = res.result
			this.activeList=res.result
		}
		
	  })
	  
  },
  methods: {
    goDetails(item) {
      uni.navigateTo({
        url: `/pages/alumniActivities/activeDetails?id=${item.actId}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
//活动列表
.activeList {
  background: white;
  margin-bottom: 10px;
  .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    box-sizing: border-box;
    .left {
      width: 80%;
    }
    .right {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .state {
        border: 1px solid #999999;
        padding: 3px 10px;
        font-size: 12px;
        text-align: center;
        display: inline-block;
        margin-top: 10px;
        border-radius: 3px;
        color: #999999;
      }
    }
  }
}
</style>